<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
        }

        .list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            border: 2px solid #fff;
        }

        .list li {
            padding: 5px 40px;
            background: orangered;
            margin: 10px 20px;
        }

        #startBtn {
            width: 200px;
            height: 80px;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 75%;
            /* margin-left: -100px; */
            color: white;
            background: blueviolet;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="startBtn">开始点名</button>

    <ul class="list">
    </ul>

    <!-- Math.random() -->

    <!-- background: rgb(0-255, 0-255, 0-255) -->
    <!-- 
        1.循环每个li添加随机背景色
        2.增加定时器循环
        3.5秒后停止定时器
        4.选出被点到的li，修改背景色
     -->
     <script>
        var arr = ['张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三']

        for (var i = 0; i < arr.length; i ++) {
            var li = document.createElement('li')

            li.innerHTML = arr[i]

            document.querySelector('.list').appendChild(li)
        }

        // console.log('<li>' + arr.join('</li><li>') + '</li>')

        // document.querySelector('.list').innerHTML = '<li>' + arr.join('</li><li>') + '</li>'

        // document.querySelector('.list').innerHTML = arr.map(item => {
        //     return `<li>${item}</li>`
        // }).join('')  

        console.log(arr)
        var lis = document.querySelectorAll('.list li')

        document.querySelector('#startBtn').onclick = start

        function start () {
            var timer = setInterval(function () {
                setBackground()
            }, 100);
    
            setTimeout(function () {
                clearInterval(timer)
    
                for (var i = 0; i < lis.length; i++) {
        
                    lis[i].style.background = 'orangered'
                }
    
                var index = Math.floor(Math.random() * lis.length)
    
                lis[index].style.background = '#fff'
                lis[index].style.color = 'red'
    
            }, 5000);
        }

        function setBackground () {
    
            for (var i = 0; i < lis.length; i++) {
                var one = Math.floor(Math.random() * 255)
                var two = Math.floor(Math.random() * 255)
                var three = Math.floor(Math.random() * 255)
    
                lis[i].style.background = 'rgb('+ one + ',' + two + ',' + three + ')'
                // lis[i].style.background = `rgb(${one}, ${two}, ${three})`
            }
        }
     </script>


</body>
</html>